<template>
	<el-table :data="data" height="100%" class="library_table_data">
		<el-table-column label="库名称" min-width="360">
			<div class="table_name" slot-scope="{ row }" @click="handleLookLibrary(row)">
				<img :src="libraryCover(row)" :alt="row.name" />
				<h4>{{ row.name }}</h4>
			</div>
		</el-table-column>
		<el-table-column label="建库人" min-width="120">
			<div class="table_avatar" slot-scope="{ row }">
				<img :src="avatarImage(row)" :alt="row.createName" />
				<h4>{{ row.createName }}</h4>
			</div>
		</el-table-column>
		<el-table-column label="库文件" min-width="120">
			<template slot-scope="{ row }">
				<i class="el-icon-folder"></i>
				{{ row.diskCount }}个文件
			</template>
		</el-table-column>
		<el-table-column label="更新时间" min-width="160">
			<template slot-scope="{ row }">
				<i class="el-icon-time"></i>
				{{ row.updateTime }}
			</template>
		</el-table-column>
		<el-table-column label="操作" width="48" align="center">
			<template slot-scope="{ row }">
				<el-dropdown size="small" @command="handleLibraryCommand">
					<span class="iconfont icon-sw-more-vertical"></span>
					<el-dropdown-menu slot="dropdown">
						<template v-if="row.createId === userInfo.id">
							<el-dropdown-item :command="commandObject('edit', row)" icon="el-icon-edit">编辑</el-dropdown-item>
							<el-dropdown-item :command="commandObject('rename', row)" icon="el-icon-edit-outline">重命名</el-dropdown-item>
							<el-dropdown-item :command="commandObject('download', row)" icon="el-icon-download">下载</el-dropdown-item>
							<el-dropdown-item :command="commandObject('delete', row)" icon="el-icon-delete">删除</el-dropdown-item>
						</template>
						<template v-else>
							<el-dropdown-item :command="commandObject('detail', row)" icon="el-icon-view">查看</el-dropdown-item>
						</template>
					</el-dropdown-menu>
				</el-dropdown>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import libraryMixin from '../mixins/library';
export default {
	mixins: [libraryMixin]
};
</script>

<style lang="scss" scoped>
.library_table_data {
	.table_name {
		float: left;
		display: flex;
		align-items: center;
		cursor: pointer;
		img {
			display: block;
			width: 80px;
			height: 45px;
			object-fit: cover;
			margin-right: 10px;
		}
		h4 {
			font-weight: normal;
			line-height: 20px;
		}
	}
	.table_avatar {
		float: left;
		display: flex;
		align-items: center;
		img {
			display: block;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			object-fit: cover;
			margin-right: 10px;
		}
		h4 {
			font-weight: normal;
			line-height: 20px;
		}
	}
}
</style>
